<template>
	<div style="width:100%;">
		<ul class="aui-list aui-media-list wares_list" style="width:100%;min-height: 15rem;background: transparent" ref="list">
			<commodity-list v-if="comDetailDataList" v-for="(item, index) in comDetailDataList" :topHeight="topHeight" :ListTop="ListTop" :comInfor="translateDetailData(item)" :key="index">
			</commodity-list>
			<div v-if="isShowLoadMore" style="color:#444444 ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:white;font-weight: 600" @click.self="changeFloat">
				<LoadMoreAnimate></LoadMoreAnimate>
				正在加载...
			</div>
			<div class="no_data" v-if="comDetailDataList.length==0 || !comDetailDataList" style="background-color: #f1f1f1;">
				<img v-if="!isOnLoad" src="static/image/no_data.png" style="width:70%;" />
				<p v-if="!isOnLoad">暂无商品数据</p>
			</div>
		</ul>
	</div>
</template>

<script>
	// import Hello from './components/Hello'
	import HomeProductItem from "../../../real-components/HomeProductItem";
	import CommodityList from '@/real-components/CommodityList'
	import { translateDetailData } from '@/utils/TranslateDetailDate'
	import ClassifyImage from '@/real-components/ClassifyBanner'
	import { queryNewGoodsList } from '@/utils/ReturnAxios'
	import { mapGetters, mapMutations } from "vuex";
	import HomeFooter from "@/real-components/HomeFooter";
	import { getPageNameOrVirtualPageName } from "../../../utils/getPageName";
	import { showLoading, hideLoading } from '@/utils/loading';
	import LoadMoreAnimate from '@/real-components/LoadMoreAnimate';

	export default {
		data() {
			return {
				comDetailDataList: [],
				classifyImage: '',
				secList: [],
				firCode: '',
				firId: '',
				pageSize: 10,
				pageNum: 1,
				totalCount: 0,
				currentPageNum: 0,
				/* ListTop: 0,*/
				goodsClassId: '',
				isOnLoad: true,
				isShowLoadMore: false,
			}
		},
		components: {
			CommodityList,
			ClassifyImage,
			HomeProductItem,
			HomeFooter,
			LoadMoreAnimate
		},
		props: {
			topHeight: {
				type: Number,
				default: 570
			},
			listInfor: {
				type: Object,
				default: () => {}
			},
			imageList: {
				type: Object,
				default: () => {}
			},
			goodsClassCode: {
				type: String,
				default: ""
			},
			ListTop: {
				type: Number,
				default: 0
			},
			erjilistid: {
				type: String,
				default: ""
			},
		},
		methods: {
			...mapMutations('xxy', [
				"setseeall",
			]),
			//加载动画
			animateLodding() {
				showLoading()
				setTimeout(() => {
					hideLoading()
				}, 3000)
			},
			//用于数据转换的方法
			translateDetailData: translateDetailData,

			//第一次请求数据
			queryDetail() {
				var isReturn = this.$store.state.cjy.isReturn
				if(isReturn) {
					this.pageNum = this.$store.state.cjy.pageNum
				}
				var config = this.getConfig(this.goodsClassCode, 1)
				this.getGoodsDetail(config)
			},

			// 请求数据接口调用
			async getGoodsDetail(data) {
				this.isOnLoad = true
				var res = await queryNewGoodsList(data)
				res = res.data.data[0]
				this.isOnLoad = false
				/*this.animateLodding()*/
				this.totalCount = res.totalCount
				this.comDetailDataList = res.results
				this.initCache()
			},
			//获取详情的配置
			getConfig(goodsClassCode, pageNum) {
				var comDetailDataList = this.comDetailDataList
				if(comDetailDataList.length > 0) {
					return {
						//classRid: goodsClassId,
						classCodeSearch: goodsClassCode,
						isPage: true,
						isPutTimeSort: 1,
						pageNum: pageNum,
						length: this.pageSize
					}
				} else {
					return {
						//classRid: goodsClassId,
						classCodeSearch: goodsClassCode,
						isPage: true,
						pageNum: 1,
						isPutTimeSort: 1,
						length: this.pageSize * pageNum
					}
				}
			},

			//加载更多时调用
			async loadMore() {
				if(this.totalCount > this.pageNum * this.pageSize) {
					this.pageNum++
					this.isShowLoadMore = true;
					var config = this.getConfig(this.goodsClassCode, this.pageNum)
					var res = await queryNewGoodsList(config)
					this.isShowLoadMore = false;
					res = res.data.data[0]
					var data = res.results || []
					this.comDetailDataList = this.comDetailDataList.concat(data)
				}
			},

			// 跳转前保存当前页面 数据
			savePageNum() {
				this.$store.commit('cjy/CHANGE_PAGE_NUM', this.pageNum)
			},
			//初始化数据
			initData() {
				var classifyList = this.classifyList
				var returnList = classifyList.find((item) => {
					return item.goodsclasscode == this.goodsClassCode
				})
				var goodsClassId = returnList ? returnList.goodsclassid : ''
				this.goodsClassId = goodsClassId
				if(!this.goodsClassCode) {
					return
				}
				/*this.queryDetail()*/
				this.loadData()
			},
			initCache() {
				sessionStorage.setItem(this.pageName + this.erjilistid + this.goodsClassCode, JSON.stringify(this.comDetailDataList));
				sessionStorage.setItem(this.pageName + this.erjilistid + 'totalCount', JSON.stringify(this.totalCount));
			},
			loadData() {
				if(sessionStorage.getItem(this.pageName + this.erjilistid + this.goodsClassCode)&& this.env == 'production') {
					this.comDetailDataList = JSON.parse(sessionStorage.getItem(this.pageName + this.erjilistid + this.goodsClassCode));
					this.totalCount = JSON.parse(sessionStorage.getItem(this.pageName + this.erjilistid + 'totalCount'));
					var isReturn = this.$store.state.cjy.isReturn
					if(isReturn) {
						this.pageNum = this.$store.state.cjy.pageNum
					}
					if(this.comDetailDataList.length==0 ||!this.comDetailDataList){
						this.isOnLoad = false
					}
				} else {
					this.queryDetail()
				}
				
			},
		},
		watch: {
			goodsClassCode(data) {
				this.initData()
			}
		},
		computed: {
			...mapGetters("cjy", [
                /*"classifyData"*/
                "newClassifyData"
            ]),
			classifyList() {
				return this.newClassifyData;
				//return this.$store.state.cjy.classifyList
			},
			pageName() {
				return getPageNameOrVirtualPageName();
			},
			env() {
				return window.environment;
			}
		},
		updated() {
			this.$nextTick((item) => {
				//      var list = this.$refs.list
				//      if (list) {
				//        this.ListTop = list.offsetTop
				//      }
			})
			this.$emit('refresh')
		},
		created() {
			this.initData()
			this.setseeall(false)
		},
		mounted() {
			PSEvent.listen('scrollBottom', this.loadMore)
			PSEvent.listen(this.pageName, ()=>{
				this.queryDetail();
			})
		}
	}
</script>

<style>

</style>